﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>微信菜单</title>
    <script src="/script/config.js"></script>
    <script src="/script/pack/zui/lib/sortable/zui.sortable.min.js"></script>
    <style type="text/css">
        .menu-view-body { margin: auto; display: flex }
            .menu-view-body > div { }
        .menu-view { width: 320px; border: 1px solid #e7e7eb; }
        .menu-view-head { background-image: url(/img/wechat/bg_menu_head.png); background-repeat: no-repeat; background-size: cover; height: 62px }
        .menu-view-centre { height: 500px }
        .menu-view-foot { background-image: url(/img/wechat/bg_menu_foot.png); background-repeat: no-repeat; background-size: cover; height: 42px; position: relative; }
        .menu-view-foot-tree { margin-left: 43px; display: flex }
            .menu-view-foot-tree > ul { padding-right: 0 !important; flex: 1 }
                .menu-view-foot-tree > ul > li { border: 1px solid #e7e7eb; border-right: 0 !important; text-align: center; background-color: #FAFAFA; border-bottom: 0 !important; cursor: pointer; position: relative; width: 90px; float: left !important; }
            .menu-view-foot-tree > a { display: inline-block; width: 90px; text-align: center; color: #353535; padding: 10px 2px !important; border: 1px solid #e7e7eb; border-right: 0 !important; border-bottom: 0 !important; display: none }
                .menu-view-foot-tree > a:hover { background-color: #f1f1f1; }
            .menu-view-foot-tree > ul > li > a.active { background-color: #3280FC; color: #fff; }
            .menu-view-foot-tree > ul > li > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .sub-menu { position: absolute; bottom: 42px; box-shadow: 0px 1px 0px 0px #f9e6e6; }
            .sub-menu > ul { margin-bottom: 0 !important; width: 90px }
                .sub-menu > ul > li { padding: 10px 2px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
                    .sub-menu > ul > li:hover { background-color: #f1f1f1; }
                    .sub-menu > ul > li.active { background-color: #3280FC; color: #fff; }
            .sub-menu > a { padding: 10px 2px !important; color: #353535; display: inline-block; background-color: #fff; border: 1px solid #dddddd; width: 90px; display: none }
                .sub-menu > a:hover { background-color: #f1f1f1; }
        .event-view { margin: 10px; display: none }
        .menu-view-bottom { clear: both; margin-top: 15px }
        .menu-view-panel { height: 551px }
        .menu-view-panel-plac { height: 551px; display: none }
    </style>
</head>
<body>

    <div class="view-page">
        <div class="alert alert-warning" style="margin-bottom:20px;padding: 15px;">
            <p>注意：拖动菜单即可排序</p>
            <p>注意：排序每次只能开始一个，如果主菜单开启，子菜单无效，子菜单开启，主菜单无效</p>
            <p>
                1、自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单。
            </p>
            <p> 2、一级菜单最多4个汉字，二级菜单最多7个汉字，多出来的部分将会以“...”代替。</p>
            <p> 3、创建自定义菜单后，菜单的刷新策略是，在用户进入公众号会话页或公众号profile页时，如果发现上一次拉取菜单的请求在5分钟以前，就会拉取一下菜单，如果菜单有更新，就会刷新客户端的菜单。测试时可以尝试取消关注公众账号后再次关注，则可以看到创建后的效果。</p>
        </div>
        <div class="view-data">
            <div class="menu-view-body">
                <div class="col-xs-3">
                    <div class="menu-view">
                        <div class="menu-view-head"></div>
                        <div class="menu-view-centre"></div>
                        <div class="menu-view-foot">
                            <div class="menu-view-foot-tree">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="panel menu-view-panel">
                        <div class="panel-heading">
                            正在编辑菜单 [<span id="eidt-menu-title"></span>]
                            <a href="javascript:;" id="btn-menu-delete" class="btn btn-link">删除按钮</a>
                        </div>
                        <div class="panel-body">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2">菜单名称</label>
                                    <div class="col-md-6 col-sm-10">
                                        <input type="text" class="form-control width-320px" id="eidt-menu-text" placeholder="菜单名称">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2">触发事件</label>
                                    <div class="col-sm-10">
                                        <div id="eidt-menu-radio">
                                            <label class="radio-reset">
                                                <input type="radio" name="click" value="view" checked><span>跳转网页</span>
                                            </label>
                                            <label class="radio-reset">
                                                <input type="radio" name="click" value="click"><span>点击事件</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="event-view" data-event-view="view">
                                        <div class="form-group">
                                            <label class="col-sm-2">跳转地址</label>
                                            <div class="col-sm-10">
                                                <p class="text-red">当在微信菜单点击此按钮跳转指定的网页</p>
                                                <textarea id="eidt-menu-text-view" class="form-control width-320px" placeholder="填写你需要跳转的网页地址"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="event-view" data-event-view="click">
                                        <div class="form-group">
                                            <label class="col-sm-2">触发事件</label>
                                            <div class="col-sm-10">
                                                <select id="eidt-menu-select-click" class="form-control width-320px">
                                                    <option value="Share_Card">分享名片</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="menu-view-panel-plac"></div>
                    <div class="menu-view-bottom">
                        <button type="button" class="btn" id="btn-sort-menu">主菜单排序</button>
                        <button type="button" class="btn" id="btn-sort-sub">子菜单排序</button>
                        <button type="button" class="btn btn-primary" id="btn-submit">保存并发布</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/html" id="tp-main-menu-html">
    <li>
        <a href="javascript:;" data-obj="menu" data-event-type="view" data-event-content="">{{name}}</a>
        <div class="sub-menu">
            <ul class="list-group"></ul>
            <a href="javascript:;" data-btn="add" title="添加一个子菜单"><i class="icon icon-plus"></i></a>
        </div>
    </li>
</script>
<script type="text/html" id="tp-sub-menu-html">
    <li class="list-group-item" data-obj="sub" data-event-type="view" data-event-content="">子菜单</li>
</script>
<script type="text/html" id="tp-menu-html">
    <ul id="main-menu" class="nav navbar-nav nav-justified">
        {{each data item}}
        <li class="sort-item">
            <a href="javascript:;" data-event-type="{{item.type}}" data-event-content="{{item.type=="view" ? item.url : item.key}}" data-obj="menu">{{item.name}}</a>
            <div class="sub-menu">
                <ul class="list-group">
                    {{each item.sub_button sub_item}}
                    <li class="list-group-item" data-obj="sub" data-event-type="{{sub_item.type}}" data-event-content="{{sub_item.type=="view" ? sub_item.url : sub_item.key}}">{{sub_item.name}}</li>
                    {{/each}}
                </ul>
                <a href="javascript:;" data-btn="add" title="添加一个子菜单"><i class="icon icon-plus"></i></a>
            </div>
        </li>
        {{/each}}
    </ul>
    <a href="javascript:;" onclick="addMainMenu(this)"><i class="icon icon-plus"></i></a>
</script>

<script type="text/javascript">


    $(function () {

        $.http.json("wechat/mp/menu/data", {}, {
            pass: function (d) {
                inItMethod(JSON.parse(d.JsonContent))
            }
        })

        function inItMethod(initData) {
            // console.warn(template("tp-menu-html", { data: initData.button }));
            $(".menu-view-foot-tree").html(template("tp-menu-html", { data: initData.button }));


            $("#btn-sort-menu").click(function () {
                $.msgSucceed("已帮你开启主菜单排序,已关闭子菜单排序");
                $("#main-menu").sortable({ selector: ".sort-item" });
                $("#main-menu>li>div>ul").sortable("destroy");
            })

            $("#btn-sort-sub").click(function () {
                $.msgSucceed("已帮你开启子菜单排序,已关闭主菜单排序");
                $("#main-menu").sortable("destroy");
                $("#main-menu>li>div>ul").sortable({ selector: "li" });
            })

            function panelShow(type) {

                if (type == 0) {
                    $(".menu-view-panel").hide();
                    $(".menu-view-panel-plac").show();
                } else {
                    $(".menu-view-panel-plac").hide();
                    $(".menu-view-panel").show();
                }
            }

            //主菜单点击
            $(".view-page").on("click", "#main-menu > li >a", function (event) {
                event.stopPropagation();
                var _this = $(this);
                var eType = _this.attr("data-event-type");
                var eContent = _this.attr("data-event-content");
                Sub_Menu_Parm = { el: _this, name: _this.text(), eType: eType, eContent: eContent }
                $("#main-menu > li > div>a").css("display", "none");

                if (_this.next().find("ul>li").length > 0) {
                    panelShow(0);
                } else {
                    panelShow(1);
                }

                if (_this.next().find("ul>li").length < 5) {
                    _this.next("div").children('a[data-btn="add"]').css("display", "inline-block");
                } else {
                    _this.next("div").children('a[data-btn="add"]').css("display", "none");
                }
                $("#main-menu>li>div>ul>li").removeClass("active");
                $("#main-menu>li>div").hide();
                _this.next().show();
                _this.parent().siblings().children("a").removeClass("active");
                _this.addClass("active");
                eidtMenu(Sub_Menu_Parm);
            })

            //子菜单添加
            $(".view-page").on("click", "#main-menu > li a[data-btn='add']", function (event) {
                event.stopPropagation();
                var _dom = $(this).prev("ul");
                panelShow(0);
                if (_dom.children("li").length >= 5) { $.alert("子菜单不能超过5个"); return; }
                _dom.append(template("tp-sub-menu-html", {}));
                if (_dom.children("li").length >= 5) { $(this).hide(); }
            })

            var Sub_Menu_Parm;
            //子菜单点击
            $(".view-page").on("click", "#main-menu>li>div>ul>li", function (event) {
                event.stopPropagation();
                var _this = $(this);
                panelShow(1);
                var eType = _this.attr("data-event-type");
                var eContent = _this.attr("data-event-content");
                $("#main-menu>li>a").removeClass("active");
                _this.siblings().removeClass("active");
                _this.addClass("active");
                Sub_Menu_Parm = { el: _this, name: _this.text(), eType: eType, eContent: eContent }
                eidtMenu(Sub_Menu_Parm);
            });

            $("#btn-menu-delete").click(function () {
                var type = $(Sub_Menu_Parm.el).attr("data-obj")
                if (type == "menu") {
                    $(Sub_Menu_Parm.el).parent("li").remove();
                    if ($(".main-menu > li").length < 3) {
                        $(".menu-view-foot-tree > a").show();
                    }
                    if ($("#main-menu>li").length <= 0) { panelShow(0); }
                } else if (type == "sub") {
                    var p = $(Sub_Menu_Parm.el).parent();
                    $(Sub_Menu_Parm.el).remove();
                    if ($(p).children("li").length <= 0) {
                        $(p).next().css("display", "none");
                        panelShow(0);
                    }
                }
            })

            function eidtMenu(obj) {
                $("#eidt-menu-title").text(obj.name);
                $("#eidt-menu-text").val(obj.name);
                $("#eidt-menu-text-view").val(obj.eContent);
                $("#eidt-menu-radio input[type='radio'][name='click'][value='" + obj.eType + "']").prop("checked", true);
                $(".event-view").hide();
                $(".event-view[data-event-view='" + obj.eType + "']").show();
                $("#eidt-menu-select-click").val(obj.eContent);
            }

            //文本
            $("#eidt-menu-text").keyup(function () {
                Sub_Menu_Parm.el.attr("data-event-content", $(this).val().trim());
                Sub_Menu_Parm.el.text($(this).val().trim());
            })
            //跳转地址
            $("#eidt-menu-text-view").keyup(function () {
                Sub_Menu_Parm.el.attr("data-event-content", $(this).val().trim());
            })

            //事件选择
            $("#eidt-menu-select-click").change(function () {
                Sub_Menu_Parm.el.attr("data-event-content", $(this).val().trim());
            })

            //选择
            $("#eidt-menu-radio input[type='radio'][name='click']").click(function () {
                Sub_Menu_Parm.el.attr("data-event-type", $(this).val());
                $(".event-view").hide();
                $(".event-view[data-event-view='" + $(this).val() + "']").show();
            })

            //发布
            $("#btn-submit").click(function () {
                var buttonData = { button: [] };
                $("#main-menu > li").each(function (i, dom) {
                    var _type = $(dom).children("a").attr("data-event-type");
                    var _content = $(dom).children("a").attr("data-event-content");

                    var menuData = {
                        name: $(dom).children("a").text().trim()
                    };
                    switch (_type) {
                        case "click":
                            menuData["key"] = _content;
                            break;
                        case "view":
                            menuData["url"] = _content;
                            break;
                    }
                    if ($(dom).find("ul>li").length <= 0) {
                        menuData["type"] = _type;
                        buttonData.button.push(menuData);
                    } else {
                        var subData = { name: $(dom).children("a").text().trim(), sub_button: [] };
                        $(dom).find("ul > li").each(function (subI, subDom) {
                            var type = $(subDom).attr("data-event-type");
                            var content = $(subDom).attr("data-event-content");
                            var data = {
                                type: type,
                                name: $(subDom).text().trim(),
                            };
                            switch (type) {
                                case "click":
                                    data["key"] = content;
                                    break;
                                case "view":
                                    data["url"] = content;
                                    break;
                            }
                            subData.sub_button.push(data);
                        });
                        buttonData.button.push(subData);
                    }
                })

                if (buttonData.button.length <= 0) {
                    $.alert("你的菜单没有，发布什么???");
                    return;
                }

                $.http.json("wechat/mp/menu/issue", { JsonContent: JSON.stringify(buttonData) }, {
                    pass: function (d) {
                        $.msgSucceed(d.Errmsg);
                    }, error: function (d) {
                        $.msgFall(d.Errmsg);
                    }
                })
            })
        }

       

    })

    function addMainMenu(obj) {
        var count = $("#main-menu > li").length;
        if (count >= 3) {
            $.alert("主菜单不能超过3个"); return;
        }
        $("#main-menu").append(template("tp-main-menu-html", { name: "主菜单" }));
        if ($("#main-menu > li").length >= 3) { $(obj).hide(); }
    }

</script>